<template>
  <view :style="colorStyle">
    <view class="activity">
      <view class="num-wrapper">
        <view class="num-item">
          <view class="num">{{ indexData.httpData.intermediary || 0 }}<text>个</text></view>
          <view class="txt">已签约中介</view>
        </view>
        <view class="num-item">
          <view class="num">{{ indexData.httpData.landlord || 0 }}<text>家</text></view>
          <view class="txt">已签约房东</view>
        </view>
        <view class="num-item">
          <view class="num">{{ numberToChinese(indexData.httpData.signed_area) || 0 }}<text>㎡</text></view>
          <view class="txt">已签约面积</view>
        </view>
        <view class="num-item">
          <view class="num">{{ indexData.httpData.users || 0 }}<text>人</text></view>
          <view class="txt">平台用户数</view>
        </view>
      </view>

      <view class="activity_countdown">
        <view class="count acea-row row-between-wrapper" @click="onSpread()">
          <view class="left"> 积分奖励 </view>
          <view class="right"> 我要推广赚钱 </view>
        </view>
        <swiper
          class="list"
          :indicator-dots="false"
          :autoplay="true"
          :interval="2000"
          :duration="2000"
          :circular="true"
          :vertical="true"
          :display-multiple-items="6"
          easing-function="linear"
        >
          <swiper-item v-for="item in orderList" v-if="item.user">
            <view class="list-item acea-row row-between-wrapper">
              <view class="name">
                用户1{{ Math.floor(Math.random() * (9 - 3 + 1)) + 3 }}{{ Math.floor(Math.random() * (9 - 0 + 1)) + 0 }}******
                <!-- {{ item.user && item.user.nickname ? item.user.nickname : '匿名用户' }}
                <text v-if="item.user && item.user.role == 0">用户</text>
                <text v-if="item.user && item.user.role == 1">房东</text>
                <text v-if="item.user && item.user.role !== 0 && item.user.role !== 1">中介</text> -->
              </view>
              <view class="value"> {{ item.title }}积分{{ item.number }} </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="activity_countdown" @click="onSgin()">
        <view class="count acea-row row-between-wrapper">
          <view class="left"> 最新签约 </view>
          <view class="right"> 我要签约 </view>
        </view>
        <swiper
          class="list"
          :indicator-dots="false"
          :autoplay="true"
          :interval="2000"
          :duration="2000"
          :circular="true"
          :vertical="true"
          :display-multiple-items="6"
          easing-function="linear"
        >
          <swiper-item v-for="item in orderList" v-if="item.user_type == 'renting'">
            <view class="list-item acea-row row-between-wrapper">
              <view class="name">
                用户1{{ Math.floor(Math.random() * (9 - 3 + 1)) + 3 }}{{ Math.floor(Math.random() * (9 - 0 + 1)) + 0 }}******
                <!-- <text v-if="item.user && item.user.role == 0">用户</text>
                <text v-if="item.user && item.user.role == 1">房东</text>
                <text v-if="item.user && item.user.role !== 0 && item.user.role !== 1">中介</text>
                {{ item.user && item.user.nickname ? nameShow(item.user.nickname) : '匿名用户' }} -->
              </view>
              <view class="value"> 成功和平台签约{{ item.number }}m² </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view :style="{ height: statusBarHeight + 'px;' }"></view>
    <pageFooter :style="colorStyle"></pageFooter>
  </view>
</template>

<script>
const app = getApp()
import { getIndexData } from '@/api/api.js'
import { toLogin } from '@/libs/login.js'
import { mapGetters } from 'vuex'
import { HTTP_REQUEST_URL } from '@/config/app'
import colors from '@/mixins/color'
import pageFooter from '@/components/pageFooter/index.vue'
import countDown from '@/components/countDown'
export default {
  components: {
    pageFooter,
    countDown
  },
  mixins: [colors],
  computed: mapGetters(['isLogin']),
  data() {
    return {
      loadTitle: '加载更多',
      loading: false,
      loadend: false,
      page: 1,
      limit: 15,
      userList: [],
      orderList: [],
      image: [],
      indexData: {
        httpData: {
          intermediary: 0,
          landlord: 0,
          signed_area: 0,
          users: 0
        }
      },
      // #ifdef H5 || MP
      pageHeight: '100%',
      // #endif
      // #ifdef APP-PLUS
      pageHeight: app.globalData.windowHeight,
      // #endif
      statusBarHeight: uni.getSystemInfoSync().safeAreaInsets.bottom,
      imgHost: HTTP_REQUEST_URL,
      bubbles: [],
      timer: null,

      countDownHour: '00',
      countDownMinute: '00',
      countDownSecond: '00',
      datatime: 0,

      change: false,
      apply_sum: 0
    }
  },
  onLoad(options) {
    let that = this
  },
  onShow() {
    this.getIndex()
  },
  methods: {
    numberToChinese: function (num) {
      if (num < 10000) {
        return num.toString()
      } else if (num >= 10000 && num < 100000000) {
        return (num / 10000).toFixed(num % 10000 === 0 ? 0 : 2) + '万'
      } else if (num >= 100000000) {
        return (num / 100000000).toFixed(num % 100000000 === 0 ? 0 : 2) + '亿'
      }
    },
    getIndex: function () {
      let that = this
      getIndexData()
        .then((res) => {
          console.log('统计信息>>>>', res.data.integralList)
          that.orderList = res.data.integralList
          that.$set(that, 'indexData', res.data)
          that.$set(that, 'orderList', res.data.integralList)
        })
        .catch((msg) => {
          console.log('>>>>', msg)
        })
    },

    phoneNumShow(phone) {
      return phone.substring(0, 3) + '****' + phone.substring(7)
    },

    nameShow(name) {
      if (name) {
        return name.substring(0, 1) + '*' + name.substring(2)
      }
    },

    onSpread: function () {
      uni.navigateTo({
        url: `/pages/extension/invite_friend/index`
      })
    },

    onSgin: function () {
      uni.navigateTo({
        url: `/pages/users/promoter_rank/index`
      })
    },

    wantShare: function (index) {
      uni.navigateTo({
        url: `/pages/users/user_spread_code/index`
      })
    },

    formatDate: function (value) {
      if (value == undefined) {
        return
      }
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let date = new Date(value * 1000)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM //月补0
      let d = date.getDate()
      d = d < 10 ? '0' + d : d //天补0
      let h = date.getHours()
      h = h < 10 ? '0' + h : h //小时补0
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m //分钟补0
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s //秒补0
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s //年月日时分秒
    },
    getDateDiff: function (data) {
      // 传进来的data必须是日期格式，不能是时间戳
      // 将字符串转换成时间格式
      var timePublish = new Date(data)
      var timeNow = new Date()
      var minute = 1000 * 60
      var hour = minute * 60
      var day = hour * 24
      var month = day * 30
      var result = '2'

      var diffValue = timeNow - timePublish
      var diffMonth = diffValue / month
      var diffWeek = diffValue / (7 * day)
      var diffDay = diffValue / day
      var diffHour = diffValue / hour
      var diffMinute = diffValue / minute

      if (diffValue < 0) {
        result = '时间不详'
      } else if (diffMonth > 1) {
        result = parseInt(diffMonth) + '月前'
      } else if (diffWeek > 1) {
        result = parseInt(diffWeek) + '周前'
      } else if (diffDay > 1) {
        result = parseInt(diffDay) + '天前'
      } else if (diffHour > 1) {
        result = parseInt(diffHour) + '小时前'
      } else if (diffMinute > 1) {
        result = parseInt(diffMinute) + '分钟前'
      } else {
        result = '刚刚'
      }
      return result
    }
  },
  onReachBottom() {}
}
</script>

<style lang="scss">
.activity {
  .num-wrapper {
    z-index: 29;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    margin: 30rpx;
    border-radius: 16rpx;
    height: 160rpx;
    background-image: linear-gradient(45deg, var(--view-theme), var(--view-bntColor), var(--view-theme), var(--view-bntColor), var(--view-theme));
    background-size: 400%;
    animation: bganimation 15s infinite;
    @keyframes bganimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    &.on {
      height: 128rpx;
      margin-top: -68rpx;
      .gift {
        color: var(--view-theme);
        margin-left: 10rpx;
        font-weight: bold;
      }
    }

    .img {
      margin-left: 38rpx;
      width: 76rpx;
      height: 68rpx;
    }

    .text {
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      margin-left: -60rpx;
    }

    .btn-login {
      width: 144rpx;
      height: 56rpx;
      background-color: var(--view-theme);
      border-radius: 28rpx;
      text-align: center;
      line-height: 56rpx;
      margin-right: 32rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #ffffff;
    }

    .num-item {
      width: 33.33%;
      text-align: center;
      .num {
        font-size: 32rpx;
        font-weight: bold;
        text {
          font-size: 24rpx;
          margin-left: 10rpx;
        }
      }
      .txt {
        margin-top: 8rpx;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
  }

  .activity_countdown {
    border: solid 1rpx var(--view-theme);
    margin: auto 30rpx 30rpx;
    border-radius: 20rpx;
    .count {
      border-radius: 18rpx 18rpx 0 0;
      background: var(--view-theme);
      padding: 10rpx 20rpx;
      color: #ffffff;
      .left {
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
      }
      .right {
        border: solid 1rpx #ffffff;
        border-radius: 10rpx;
        padding: 10rpx 20rpx;
      }
    }
    .list {
      height: 520rpx;
      overflow-y: auto;
      padding: 10rpx;
      border-radius: 10rpx;
      .list-item {
        text-align: center;
        padding: 0 20rpx;
        border-radius: 6rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: solid 1rpx var(--view-minorColorT);
        .name {
          font-size: 26rpx;
        }
        .value {
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>
